<template>
  <div class="w-full h-full relative text-white">
    <div v-if="loading" class="absolute inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50 z-50">
      <span class="text-white text-xl">加载中...</span>
    </div>
    <div v-else>
      <WindowTab
        obj="weatherForecast"
        :full="false"
        :mini="false"
        font-color="text-white"
        class="w-full absolute top-0 z-50 px-1 pt-1"
      ></WindowTab>
      <div :class="['w-full h-[100vh] overflow-y-scroll absolute top-0 z-10', weatherClass]">
        <!-- 当前天气 -->
        <div class="text-center my-5">
          <h1>{{ currentWeather?.location }}</h1>
          <div class="flex justify-center items-center gap-2">
            <span class="text-6xl font-bold mr-2">{{ currentWeather?.temp }}°</span>
            <span :class="['qi-' + currentWeather?.icon, 'text-6xl']"></span>
          </div>
          <p class="mt-2 text-lg">{{ currentWeather?.text }}</p>
          <div class="flex justify-around mt-4">
            <span><i class="iconfont icon-310-baoyu" style="font-size: 20px"></i> {{ currentWeather?.precip }}</span>
            <span><i class="iconfont icon-shidu"></i> {{ currentWeather?.humidity }}%</span>
            <span><i class="iconfont iconfont icon-fengli"></i> {{ currentWeather?.windScale }}</span>
          </div>
        </div>

        <!-- 逐小时预报 -->
        <div
          class="w-[95%] m-auto flex flex-row justify-evenly gap-7 overflow-x-scroll py-4 px-2 bg-white bg-opacity-20 rounded-lg whitespace-nowrap"
        >
          <div v-for="hour in dayHouerForecastList" :key="hour.fxTime" class="flex flex-col items-center gap-2">
            <span>{{ dayjs(hour.fxTime).format("HH:mm") }}</span>
            <span>{{ hour.temp }}°</span>
            <i :class="['qi-' + hour.icon, 'text-4xl']"></i>
          </div>
        </div>

        <!-- 7天预报 -->
        <div class="flex flex-col gap-4 mt-6 p-2">
          <div
            v-for="day in sevenDayForecastList"
            :key="day.fxDate"
            class="flex justify-between items-center px-4 py-2 bg-white bg-opacity-10 rounded-lg"
          >
            <span>{{ day.fxDate }}</span>
            <i :class="['qi-' + day.iconDay, 'text-4xl']"></i>
            <span>{{ day.tempMin }}° / {{ day.tempMax }}°</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import dayjs from "dayjs";
import { IWeatherSevenDayForecast, IWeatherDayHourForecast, IWeatherData, ICurrentWeather } from "@/types/system";
import { useSystem } from "@/store/modules/system";
import { GetDayHourForecast, GetTodayWeather, GetSevenDayForecast } from "@/utils/common";
import WindowTab from "@/components/WindowTab/index.vue";

let system = useSystem();
let todyWeather = ref<IWeatherData | null>(null);
let sevenDayForecastList = ref<IWeatherSevenDayForecast[]>([]);
let dayHouerForecastList = ref<IWeatherDayHourForecast[]>([]);

// 加载状态
const loading = ref(true);

// 当前天气数据
const currentWeather = computed<ICurrentWeather | null>(() => {
  if (!todyWeather.value) return null;
  return {
    ...todyWeather.value,
    location: system.UserLocationData?.city ?? "",
  };
});

// 根据天气类型动态设置背景
const weatherClass = computed(() => {
  if (!currentWeather.value?.icon) return "weather-cloudy";
  const icon = currentWeather.value.icon;
  if (["100", "101", "102"].includes(icon)) {
    return "clear-sky";
  } else if (["103", "104"].includes(icon)) {
    return "cloudy";
  } else if (["300", "301", "302", "303", "304"].includes(icon)) {
    return "rain";
  } else if (["400", "401", "402", "403", "404"].includes(icon)) {
    return "snow";
  }
  return "default-weather";
});

// 获取今日天气
async function GetNowWeather() {
  let res = await GetTodayWeather();
  if (!res) return;
  todyWeather.value = res;
}

// 获取小时预报
async function GetHourForecast() {
  let res = await GetDayHourForecast();
  if (!res) return;
  dayHouerForecastList.value = res;
}

// 获取七天预报
async function GetDayForecast() {
  let res = await GetSevenDayForecast();
  if (!res) return;
  sevenDayForecastList.value = res;
}

// 启动加载
Promise.all([GetNowWeather(), GetHourForecast(), GetDayForecast()]).finally(() => {
  loading.value = false;
});
</script>

<style scoped>
@import url("@/assets/css/common/wheather.css");
</style>
